<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户注册</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" th:href="@{../lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" href="../css/public.css" th:href="@{../css/public.css}" media="all">
    <link rel="stylesheet" href="../css/layuimini.css?v=2.0.1" th:href="@{../css/layuimini.css?v=2.0.1}" media="all">
</head>
<div class="layui-container layui-mystyle-form">
    <div class="layui-form layuimini-form"  lay-filter="register">

        <div class="layui-form-item">
            <label class="layui-form-label required">用户账号</label>
            <div class="layui-input-block">
                <input type="text"  name="account" id="account"  lay-verify="required"  placeholder="请输入用户账号" autocomplete="off" class="layui-input">
                <tip>用户账号确定后不可修改！</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="password" lay-verify="required"  placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="repwd" lay-verify="required"  placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" lay-verify="required" placeholder="请输入用户名" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="userPhone" lay-verify="required|phone" placeholder="请输入手机号" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">角色名称</label>
            <div class="layui-input-block">
                <select name="roleId" lay-verify="required">
                    <option value="">请选择一个角色</option>
                    <option value="1">管理员</option>
                    <option value="2">用户</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">注册码</label>
            <div class="layui-input-block">
                <input type="text" name="userSalt" id="userSalt" lay-verify="required" placeholder="请输入注册身份码" value="" class="layui-input">
                <tip>请保证注册码可注册身份与用户身份的一致性</tip>
            </div>
        </div>



        <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="register">用户注册</button>
                </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20%;margin-left: 10%;">
            <div class="layui-input-block">
                <a href="/User/login" style="font-size: 12px;">返回登录页</a>
            </div>
        </div>

    </div>

</div>
<script src="../lib/layui-v2.5.5/layui.js" th:src="@{../lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script src="../js/lay-config.js?v=2.0.0" th:src="@{../js/lay-config.js}" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //监听提交
        form.on('submit(register)', function (data) {
            var datas = data.field;
            let pwd = $("#password").val();
            let repwd = $("#repwd").val();
            if (pwd === repwd)
            {
                console.log(datas);
                $.ajax({
                    url: '/User/registerUser',
                    type: 'post',
                    data: datas,
                    dataType: "json",
                    success: function (res) {
                        console.log(res);
                        if (res.code === '200') {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000},function () {
                                setTimeout(function () {
                                    window.location.href = '/User/login'
                                },1000)
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1000});
                        }
                    }, error: function () {
                        layer.msg('网页出错了,即将跳转异常页', {icon: 2,time:1500});
                        setTimeout(function () {
                            window.location.href = '/User/404'
                        },1600)

                    }
                });
                return false;
            }else
            {
                layer.msg("两次密码输入的不一致，请重试", {icon: 2, time: 1000})
            }

        });

    });
</script>

